<script lang="ts" setup>
  import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue
  } from '@renderer/components/ui/select'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  const settingsStore = useSettingsStore()
</script>
<template>
  <section class="section bordegray-700 bordeb p-6">
    <!-- 默认设备设置 -->
    <div class="setting-item mb-6">
      <div class="mb-2 flex items-center justify-between">
        <label class="text-gray-300">摄像头</label>
      </div>
      <Select>
        <SelectTrigger class="w-full">
          <SelectValue placeholder="系统默认摄像头" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem
              v-for="camera in settingsStore.getCameraList"
              :value="camera.id"
              :key="camera.id"
            >
              {{ camera.label }}
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>

    <div class="setting-item mb-6">
      <div class="mb-2 flex items-center justify-between">
        <label class="text-gray-300">麦克风</label>
      </div>
      <Select>
        <SelectTrigger class="w-full">
          <SelectValue placeholder="系统默认麦克风" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple"> Apple </SelectItem>
            <SelectItem value="banana"> Banana </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  </section>
</template>
